Customizing the Gauge Shape

Most radial gauges are circular, but you can create gauges with other shapes as well. To customize the shape of a C1RadialGauge, you would need to:

Choose a shape for the gauge.
Set the C1RadialGauge.PointerOrigin property to match the position of the pointer taking into account the gauge shape.
Hide the default round background by setting the gauge's Background property to Transparent and the BorderThickness to 0.
Add elements to the C1Gauge.Face layer to show the new gauge shape.

Complete the following steps to follow the steps above to create a C1RadialGauge with a customized shape:

Switch to XAML view and modify the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140"> </c1gauge>

This will set the C1RadialGauge control's initial properties.

In XAML view add PointerOrigin="0.8,0.5" to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5"> </c1gauge>

The C1RadialGauge.PointerOrigin property will set where the C1RadialGauge control's C1GaugePointer originates.

In XAML view add Background="Transparent" to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent"> </c1gauge>

The C1RadialGauge control will now appear transparent.

In XAML view add BorderThickness="0" to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0"> </c1gauge>

Markup

Copy Code

<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
</c1gauge>

The C1RadialGauge control will now appear without a border.

In XAML view add markup after the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0"> <!-- Add tick marks to the gauge --> <Gauge:C1GaugeMark Interval="10" Location="1"/> <Gauge:C1GaugeMark Interval="5" Location="1" /> </c1gauge>

Markup

Copy Code

<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
    <!-- Add tick marks to the gauge -->
    <Gauge:C1GaugeMark Interval="10" Location="1"/>
    <Gauge:C1GaugeMark Interval="5" Location="1" />
</c1gauge>

This will add C1GaugeMark elements and tick marks to the gauge.

In XAML view add markup after the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0"> <!-- Add tick marks to the gauge --> <Gauge:C1GaugeMark Interval="10" Location="1"/> <Gauge:C1GaugeMark Interval="5" Location="1" /> <!-- Add a face with custom shape --> <Gauge:C1RadialGauge.Face> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="4" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Border Grid.Column="1" Background="Black" BorderBrush="LightGray" BorderThickness="4" CornerRadius="140,60,60,140"/> </Grid> </Gauge:C1RadialGauge.Face> </c1gauge>

Markup

Copy Code

<Gauge:C1RadialGauge Height="189" Margin="102,34,127,26" Name="C1RadialGauge1" Width="189" StartAngle="-160" SweepAngle = "140" PointerOrigin="0.8,0.5" Background="Transparent" BorderThickness="0">
    <!-- Add tick marks to the gauge -->
    <Gauge:C1GaugeMark Interval="10" Location="1"/>
    <Gauge:C1GaugeMark Interval="5" Location="1" />
    <!-- Add a face with custom shape -->
    <Gauge:C1RadialGauge.Face>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="1" Background="Black" BorderBrush="LightGray" BorderThickness="4" CornerRadius="140,60,60,140"/>
        </Grid>
    </Gauge:C1RadialGauge.Face>
</c1gauge>

This will add a customized C1Gauge.Face to the gauge.

Run your project and observe:

The C1RadialGauge control appears with a customized face:

You can customize the C1Gauge.Face of the C1RadialGauge control even further. For example, take a look at the following customized gauges included on the SpeedometersPage.xaml page of the GaugeSamples sample installed with Studio for WinRT: